<template>
  <el-table
    v-loading="loading"
    :data="withdrawList"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column label="申请编号" align="center" prop="withdrawId" width="100" />
    <el-table-column label="申请标题" align="center" prop="title" width="200" :show-overflow-tooltip="true" />
    <el-table-column label="公寓名称" align="center" prop="apartmentName" width="120" />
    <el-table-column label="提现金额" align="center" prop="amount" width="120">
      <template #default="scope">
        <span class="amount-text">¥{{ scope.row.amount }}</span>
      </template>
    </el-table-column>
    <el-table-column label="收款账户" align="center" prop="paymentAccountName" width="120" />
    <el-table-column label="银行账号" align="center" prop="bankAccount" width="180">
      <template #default="scope">
        <span>{{ formatBankCard(scope.row.bankAccount) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="开户行" align="center" prop="bankName" width="120" />
    <el-table-column label="持卡人" align="center" prop="accountHolder" width="100" />
    <el-table-column label="审核状态" align="center" prop="auditStatus" width="100">
      <template #default="scope">
        <dict-tag :options="withdraw_audit_status" :value="scope.row.auditStatus"/>
      </template>
    </el-table-column>
    <el-table-column label="支付状态" align="center" prop="paymentStatus" width="100">
      <template #default="scope">
        <dict-tag :options="withdraw_payment_status" :value="scope.row.paymentStatus"/>
      </template>
    </el-table-column>
    <el-table-column label="申请时间" align="center" prop="applyTime" width="160">
      <template #default="scope">
        <span>{{ parseTime(scope.row.applyTime) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="审核时间" align="center" prop="auditTime" width="160">
      <template #default="scope">
        <span>{{ parseTime(scope.row.auditTime) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="审核人" align="center" prop="auditor" width="100" />
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250" fixed="right">
      <template #default="scope">
        <div class="operation-buttons">
          <el-button
            link
            type="primary"
            icon="View"
            size="mini"
            @click="handleDetail(scope.row)"
          >详情</el-button>
          <el-button
            link
            type="success"
            icon="Check"
            size="mini"
            @click="handleApprove(scope.row)"
            v-if="scope.row.auditStatus === '0'"
          >批准</el-button>
          <el-button
            link
            type="danger"
            icon="Close"
            size="mini"
            @click="handleReject(scope.row)"
            v-if="scope.row.auditStatus === '0'"
          >拒绝</el-button>
          <el-button
            link
            type="warning"
            icon="Money"
            size="mini"
            @click="handlePayment(scope.row)"
            v-if="scope.row.auditStatus === '1' && scope.row.paymentStatus === '0'"
          >打款</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const { withdraw_audit_status, withdraw_payment_status } = proxy.useDict('withdraw_audit_status', 'withdraw_payment_status')

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  withdrawList: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['selection-change', 'detail', 'approve', 'reject', 'payment'])

const handleSelectionChange = (selection) => {
  emit('selection-change', selection)
}

const handleDetail = (row) => {
  emit('detail', row)
}

const handleApprove = (row) => {
  emit('approve', row)
}

const handleReject = (row) => {
  emit('reject', row)
}

const handlePayment = (row) => {
  emit('payment', row)
}

/** 格式化银行卡号 */
const formatBankCard = (cardNumber) => {
  if (!cardNumber) return ''
  return cardNumber.replace(/(\d{4})(?=\d)/g, '$1 ')
}
</script>

<style scoped>
.amount-text {
  color: #f56c6c;
  font-weight: bold;
}

.operation-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  gap: 8px;
}
</style> 